<!-- 订单管理-退换货订单 -->
<template>
  <div>

    <el-card style="max-width: 100%">
      <search-box :tableDataInput="tableData" :searchField="'number'" @search="handleSearch"></search-box>
      <el-table :data="selectedItems" style="margin-top: 16px" :header-cell-style="{ background: '#EBEEF2' }">
        <el-table-column prop="id" min-width="120" label="退货订单" />
        <el-table-column prop="orderId" min-width="120" label="订单编号" />
        <el-table-column prop="commodityName" width="150px" label="商品名称" />
        <el-table-column width="60px" label="类型">
          <template slot-scope="scope">
            {{ getReturnTypeDisplay(scope.row.returnType) }}
          </template>
        </el-table-column>
        <el-table-column prop="returnNumber" align="center" width="80px" label="退货数量" />
        <el-table-column prop="orderCommodityNumber" align="center" width="80px" label="订单数量" />
        <el-table-column prop="returnRemark" label="退换原因" />
        <el-table-column prop="createTime" align="center" label="申请时间" />
        <el-table-column label="当前状态" align="center" min-width="90">
          <template slot-scope="scope">
            <span @click.stop="handleOpenDialog(scope.row)"> {{ currentStatus(scope.row.returnOfGoodsStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="160px" align="center" label="操作">
          <template slot-scope="scope">
              <span class="control">
                <div @click="handleChangeStatus(scope.row,false)">
                  <span><img :src="getImagePath(scope.row.returnOfGoodsStatus)" alt=""></span>  
                  <span class="text">{{ getStatusText(scope.row.returnOfGoodsStatus) }}</span>
                </div>
                <div @click="handleChangeStatus(scope.row,true)" v-show="scope.row.returnOfGoodsStatus == 1 || scope.row.returnOfGoodsStatus == 2">
                  <span><img src="@/assets/icons/cancel.png" alt="" /></span>
                  <span class="text">取消</span>
                </div>  
              </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination background layout="->,prev, pager,next,total" :page-size="10" :total="tableDataLength"
      @current-change="handleCurrentChange" style="margin-top: 20px;">
    </el-pagination>

    <ReturnOExchangeOrderDetail v-if="showDialog" :dialogVisible="showDialog" :rowData="rowData"
      @closeDialog="handleCloseDialog"></ReturnOExchangeOrderDetail>
  </div>
</template>

<script>
import { returnList, approveById, confirmReceipt, cancelById } from '@/api/api';
import ReturnOExchangeOrderDetail from "./components/ReturnOExchangeOrderDetail.vue";
export default {
  components: {
    ReturnOExchangeOrderDetail,
  },
  data() {
    return {
      selectedItems: [],
      tableDataLength: 0,
      tableData: [],
      showDialog: false,
      rowData: {},
      returnOXdetais: { //请求数据
        name: '',
        pageNo: 1,
      }
    };
  },
  async created() {
    // this.selectedItems = this.tableData; // 初始显示所有商品
    return this.getAllOrderList(this.returnOXdetais);
  },
  methods: {
    async handleChangeStatus(row,isCancel) {
      var { id,orderId, returnOfGoodsStatus } = row
      const statusApi = {
        1: approveById, // 审批
        2: confirmReceipt, // 商家确认收货
        5: cancelById // 取消退换货订单
      }
      const status = {
        1: "是否通过审核？",
        2: "是否确认收货？",
        5: "是否取消该条订单退换货操作？"
      }
      const statusRes = {
        1: "审核完成",
        2: "确认收货",
        5: "取消申请"
      }
      if(isCancel){
        returnOfGoodsStatus = 5;
      }
      console.log("打印出来的状态");
      console.log(returnOfGoodsStatus);
      if(returnOfGoodsStatus == 1 || returnOfGoodsStatus == 2 || returnOfGoodsStatus == 5){
        this.$confirm(status[returnOfGoodsStatus], '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        statusApi[returnOfGoodsStatus](id).then((res) => {
          if (res.data.code === 200) {
            this.getAllOrderList(this.returnOXdetais);
            this.$message({
              type: 'success',
              message: statusRes[returnOfGoodsStatus]
            });
          }
        })
      }).catch(() => { });
        
      }else{
        this.$message({
              type: 'info',
              message: "暂无其他操作"
            }); 
      }
      
    },
    getReturnTypeDisplay(returnType) {  
      switch (returnType) {  
        case "1":  
          return '退款';  
        case "2":  
          return '退货退款';  
        case "3":  
          return '退款';  
        default:  
          return '未定义';  
      }  
    },  
    currentStatus(val) {
      const statusObj = {
        1: "提交申请",
        2: "待商家收货",
        3: "已完成",
        4: '取消',
      }
      return statusObj[val]
    },
    async getAllOrderList(data) {
      try {
        const res = await returnList(data);
        if (res.data.code == 200) {
          // console.log(res.data.result.records);
          this.selectedItems = res.data.result.records;
          this.tableData = res.data.result.records;
          this.tableDataLength = res.data.result.total;
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleCurrentChange(val) {
      this.returnOXdetais.pageNo = val;
      this.getAllOrderList(this.returnOXdetais);
    },
    handleSearch(name) {
      // this.selectedItems = filtered;
      this.returnOXdetais.name = name;
      this.getAllOrderList(this.returnOXdetais);
    },
    handleCloseDialog() {
      this.showDialog = false;
    },
    handleOpenDialog(value) {
      this.rowData = value
      this.showDialog = true;
    },
    // 使用一个方法来根据returnType的值返回对应的字符串  
    getImagePath(status) {  
      console.log("status");
      console.log(status);
      // 根据status返回不同的图片路径  
      switch (status) {  
        case 1: return require('@/assets/icons/check.png');  
        case 2: return require('@/assets/icons/ok.png');  
        case 3: return require('@/assets/icons/completed.png'); 
        default : return require("@/assets/icons/cancel.png");  
      }  
    },  
    getStatusText(status) {  
      // 根据status返回不同的文字描述  
      switch (status) {  
        case 1: return '审核';  
        case 2: return '收货确认';  
        case 3: return '完成';  
        default: return '已取消';  
      }  
    },  
  },
};
</script>

<style scoped>
.input1 {
  font-size: 16px;
  width: 241px;
  opacity: 1;
  border-radius: 80px;
  background: rgb(153, 155, 158);
}

.input1>>>input.el-input__inner {
  background: rgba(235, 238, 242, 1);
  border-radius: 20px;
}

.control {
  display: flex;
  justify-content: center; 
  /* 水平居中 */
  align-items: center;
}

.control div{
  width: 85px;
  height: 15px;
  /* background-color: aqua; */
}

.control img{
  width: 15px;
  height: 15px;
  margin-right: 3px;
  /* background-color: bisque; */
}

.control:nth-child(2) {
  width: 50px;
  text-align: right;
}

.control .text {
  display: inline-block;
  transform: translateY(-4px);
}
</style>
